<template>
    <div class="submit">
        <van-sticky>
            <van-nav-bar title="确认订单" left-text="返回" left-arrow @click-left="$router.go(-1)" />
        </van-sticky>
        <div class="decor"></div>
        <van-cell center :label="addr.address" is-link to="/address/address">
            <template #icon>
                <van-icon name="location-o" />
                <div class="pl-10"></div>
            </template>
            <template #title>
                <span>{{ addr.name }}<span class="ml-5">{{ addr.tel }}</span></span>
                <span v-if="!addr.name">请选择收货地址</span>
            </template>
        </van-cell>

        <div class="bts pt-10 pb-10 bfff">
            <van-card v-for="item in submitDetail.carts" style="background-color: #fff;margin-top: 0;"
                :num="item.buyNum" :price="(item.price / 100).toFixed(2)" :desc="item.masterName"
                :title="item.slaveName" :thumb="item.imgUrl" >
            </van-card>
        </div>
        <div>
            <van-cell-group>
                <van-cell class="jia" center title="商品金额" :value="'￥' + (submitDetail.totalMoney / 100).toFixed(2)">
                    <template #icon>
                        <van-icon name="gold-coin" />
                        <div class="pl-10"></div>
                    </template>
                </van-cell>
                <van-cell center class="yun" title="运费" label="(满100元免运费)"
                    :value="submitDetail.totalMoney >= 10000 ? '包邮' : '￥12.00'">
                    <template #icon>
                        <van-icon name="logistics" />
                        <div class="pl-10"></div>
                    </template>
                </van-cell>
                <van-cell center title="配送方式" value="送货上门" is-link>
                    <template #icon>
                        <van-icon name="logistics" />
                        <div class="pl-10"></div>
                    </template>
                    <template #value>
                        <span class="f14">免费</span>
                    </template>
                </van-cell>
                <van-cell center title="配送时间" value="尽快送达" is-link>
                    <template #icon>
                        <van-icon name="clock-o" />
                        <div class="pl-10"></div>
                    </template>
                    <template #value>
                        <span class="f14">预计明天送达</span>
                    </template>
                </van-cell>

                <van-coupon-cell class="yhq" :coupons="coupons" :chosen-coupon="chosenCoupon"
                    @click="showList = true" />

                <van-cell center title="发票信息">
                    <template #right-icon>
                        <van-dropdown-menu class="fap">
                            <van-dropdown-item v-model="value1" :options="option1" />
                        </van-dropdown-menu>
                    </template>
                </van-cell>
                <van-cell center title="订单备注" value="无" is-link />

            </van-cell-group>
        </div>

        <van-action-sheet v-model="show" title="请选择支付方式" cancel-text="确认支付" @cancel="onCancel">
            <div class="content">
                <van-radio-group v-model="radio">
                    <div class="fcb pl-10 pr-10 h40">
                        <div class="fc">
                            <van-icon name="wechat" size="26px" color="#07C160" /><span class="ml-5">微信支付</span>
                        </div>
                        <van-radio name="wx" @click="radio = 'wx'" />
                    </div>
                    <div class="fcb pl-10 pr-10 h40">
                        <div class="fc">
                            <van-icon name="alipay" size="26px" color="#409EFF" /><span class="ml-5">支付宝支付</span>
                        </div>
                        <van-radio name="zfb" @click="radio = 'zfb'" />
                    </div>
                    <div class="h60"></div>
                </van-radio-group>
            </div>
        </van-action-sheet>

        <van-popup v-model="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
            <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons"
                @change="onChange" @exchange="onExchange" />
        </van-popup>
        <van-submit-bar :price="submitDetail.totalMoney" button-text="提交订单" @submit="onSubmit" />
        <div class="h80"></div>
    </div>
</template>
<script>
import Vue from 'vue';
import { NavBar, Cell, RadioGroup, Dialog, Radio, Sticky, CellGroup, Card, SubmitBar, ActionSheet, CouponCell, CouponList, DropdownMenu, DropdownItem } from 'vant';
import request from '../../utils/request'

Vue.use(NavBar);
Vue.use(Cell);
Vue.use(Radio);
Vue.use(Sticky);
Vue.use(RadioGroup);
Vue.use(CellGroup);
Vue.use(Card);
Vue.use(SubmitBar);
Vue.use(CouponCell);
Vue.use(CouponList);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(ActionSheet);

const coupon = {
    available: 1,
    condition: '无使用门槛\n最多优惠12元',
    reason: '',
    value: 1200,
    name: '优惠券名称',
    startAt: 1742104000,
    endAt: 1750592000,
    valueDesc: '0.8',
    unitDesc: '折',
};

export default {
    data() {
        return {
            submitDetail: [],
            showList: false,
            addr: [],
            chosenCoupon: -1,
            coupons: [coupon],
            disabledCoupons: [coupon],
            option1: [
                { text: '不需要发票', value: 0 },
                { text: '需要发票', value: 1 },
            ],
            value1: 0,
            preOrderId: '',
            show: false,
            radio: 'wx',
            pay: [],
        };
    },
    created() {
        this.preOrderId = this.$route.query.preOrderId;
        this.addr = this.$store.state.addr
        // this.submitDetail = list
        this.getSubmit();
    },
    methods: {
        getSubmit() {
            let params = {
                preOrderId: this.preOrderId
            }
            request.get('/preOrder/detail', { params }).then(res => {
                this.submitDetail = res.result
            })
        },
        async onSubmit() {
            if (!this.addr.name) {
                Dialog.alert({
                    message: '请选择收货地址',
                })
            } else {
                let data = {
                    addressInfo: this.addr,
                    allFee: this.submitDetail.totalMoney,
                    discount: 0,
                    preOrderId: this.preOrderId
                }
                await request.post('/order/create', data).then(res => {
                    this.pay = res.result
                    console.log(this.pay)
                });
                this.show = true;
            }
        },
        async onCancel() {
            let data = {
                allFee: this.pay.allFee,
                createTime: this.pay.createTime,
                orderId: this.pay.orderId,
                payWay: this.radio,
            }
            await request.post('/order/pay', data).then(res => {
                this.$router.push('/order/detail/'+res.result.orderId)
            });
        },
        onChange(index) {
            this.showList = false;
            this.chosenCoupon = index;
        },
        onExchange(code) {
            this.coupons.push(coupon);
        },
    },
};
</script>

<style scoped>
.decor {
    background: #fff url();
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 3px;
}

.yhq .van-cell__value {
    color: #c03131;
}

.bts {
    border-top: 1px solid #f0f0f0;
}

.jia .van-cell__value {
    color: #c03131;
}

.yun .van-cell__value {
    color: #c03131;
}

::v-deep .van-dropdown-menu__bar {
    box-shadow: none;
}

::v-deep .van-ellipsis {
    color: #969799;
    font-size: 14px;
}

::v-deep .van-action-sheet__cancel {
    color: #c03131;
}
</style>